<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>支出-修改</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="./js/ie/html5.min.js"></script>
    <script type="text/javascript" src="./js/ie/respond.min.js"></script>
    <![endif]--></head>
<body>

<form class="layui-form" action="/costdetails-edit-updata" lay-filter="example">
    <input type="hidden" th:value="${oneCostdetails.getId()}" name="id" id="id">
    <input type="hidden" th:value="${oneCostdetails.getValid()}" name="valid" id="valid">
    <div class="layui-form-item">
        <label for="userId" class="layui-form-label">
            <span class="x-red">*</span>所属用户
        </label>
        <div class="layui-input-inline">
            <select name="userId" id="userId">
                <option value="1" th:value="${session.user.id}" th:text="${session.user.nameUser}" >张峰浦11</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label for="timeTransaction" class="layui-form-label">
            <span class="x-red">*</span>支出时间</label>
        <div class="layui-input-inline">
            <input th:value="${oneCostdetails.getTimeTransaction().toLocaleString()}" value="2020-01-01 12:12:12"
                   type="text" id="timeTransaction" name="timeTransaction" placeholder="yyyy-MM-dd HH:mm:ss" required=""
                   lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label for="amountOfMoney" class="layui-form-label">
            <span class="x-red">*</span>应付金额</label>
        <div class="layui-input-inline">
            <input th:value="${oneCostdetails.getAmountOfMoney()}" type="text" id="amountOfMoney" name="amountOfMoney"
                   required="" lay-verify="required" autocomplete="off" class="layui-input"></div>
    </div>

    <div class="layui-form-item">
        <label for="amountOfMoneyActual" class="layui-form-label">
            <span class="x-red">*</span>实付金额</label>
        <div class="layui-input-inline">
            <input th:value="${oneCostdetails.getAmountOfMoneyActual()}" type="text" id="amountOfMoneyActual"
                   name="amountOfMoneyActual" required="" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label for="largeclass" class="layui-form-label">
            <span class="x-red">*</span>大类别
        </label>
        <div class="layui-input-inline">
            <select name="largeClass" id="largeClass">
                <option th:selected="${oneCostdetails.getLargeClass() ==  '酒水饮品'}" value="酒水饮品">酒水饮品</option>
                <option th:selected="${oneCostdetails.getLargeClass() ==  '美食'}" value="美食">美食</option>
                <option th:selected="${oneCostdetails.getLargeClass() ==  '文娱娱乐'}" value="文娱娱乐">文娱娱乐</option>
                <option th:selected="${oneCostdetails.getLargeClass() ==  '交通通行'}" value="交通通行">交通通行</option>
                <option th:selected="${oneCostdetails.getLargeClass() ==  '数码周边'}" value="数码周边">数码周边</option>
                <option th:selected="${oneCostdetails.getLargeClass() ==  '手机电脑'}" value="手机电脑">手机电脑</option>
                <option th:selected="${oneCostdetails.getLargeClass() ==  '家用电器'}" value="家用电器">家用电器</option>
                <option th:selected="${oneCostdetails.getLargeClass() ==  '居家用品'}" value="居家用品">居家用品</option>
                <option th:selected="${oneCostdetails.getLargeClass() ==  '其它'}" value="其它">其它</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label for="subClass" class="layui-form-label">
            <span class="x-red">*</span>消费性质</label>
        <div class="layui-input-inline">
            <select name="subClass" id="subClass">
                <option th:selected="${oneCostdetails.getSubClass() ==  '日常开销'}" value="日常开销">日常开销</option>
                <option th:selected="${oneCostdetails.getSubClass() ==  '个人购物'}" value="个人购物">个人购物</option>
                <option th:selected="${oneCostdetails.getSubClass() ==  '代买'}" value="代买">代买</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label for="tradename" class="layui-form-label">
            <span class="x-red">*</span>商品名称</label>
        <div class="layui-input-inline">
            <input th:value="${oneCostdetails.getTradename()}" type="text" id="tradename" name="tradename" required=""
                   lay-verify="required" autocomplete="off" class="layui-input"></div>
    </div>

    <div class="layui-form-item">
        <label for="satisfactiondegree" class="layui-form-label">
            <span class="x-red">*</span>满意度
        </label>
        <div class="layui-input-inline">
            <select name="satisfactionDegree" id="satisfactionDegree">
                <option th:selected="${oneCostdetails.getSatisfactionDegree() ==  '待定'}" value="待定">待定</option>
                <option th:selected="${oneCostdetails.getSatisfactionDegree() ==  '十分满意'}" value="十分满意">十分满意</option>
                <option th:selected="${oneCostdetails.getSatisfactionDegree() ==  '满意'}" value="满意">满意</option>
                <option th:selected="${oneCostdetails.getSatisfactionDegree() ==  '一般'}" value="一般">一般</option>
                <option th:selected="${oneCostdetails.getSatisfactionDegree() ==  '不满意'}" value="不满意">不满意</option>
                <option th:selected="${oneCostdetails.getSatisfactionDegree() ==  '退款'}" value="退款">退款</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label for="note" class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea th:text="${oneCostdetails.getNote()}" placeholder="请输入内容" id="note" name="note"
                      class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="reset" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">重置</button>

            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</form>

<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#timeTransaction',
            type: 'datetime'
        });


        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');


        //监听提交
        form.on('submit(demo1)', function (data) {
            var id = document.getElementById("id").value;
            var valid = document.getElementById("valid").value;
            var userId = document.getElementById("userId").value;
            var timeTransaction = document.getElementById("timeTransaction").value;
            var amountOfMoney = document.getElementById("amountOfMoney").value;
            var amountOfMoneyActual = document.getElementById("amountOfMoneyActual").value;
            var largeClass = document.getElementById("largeClass").value;
            var subClass = document.getElementById("subClass").value;
            var tradename = document.getElementById("tradename").value;
            var satisfactionDegree = document.getElementById("satisfactionDegree").value;
            var note = document.getElementById("note").value;

            $.ajax({
                type: "post",
                url: "/updataCostdetails",
                data: {
                    id: id,
                    valid: valid,
                    userId: userId,
                    timeTransaction: timeTransaction,
                    amountOfMoney: amountOfMoney,
                    amountOfMoneyActual: amountOfMoneyActual,
                    largeClass: largeClass,
                    subClass: subClass,
                    tradename: tradename,
                    satisfactionDegree: satisfactionDegree,
                    note: note
                },
                dataType: 'json',//dataType:"json",使得返回来的数据格式为json 如果不 添加该条属性，则返回来的为字符串
                success: function (data) {
                    // console.log(data["num"]) //取值可以.key值
                    // console.log(data["age"]) //取值可以.key值
                    // console.log(data["peer"]) //取值可以.key值
                },
                error: function (data) {
                    console.log("error");
                    console.log(data)
                }
            });
            layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                },
                function () {

                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);

                });

            return false;
        });

        //表单赋值
        // layui.$('#LAY-component-form-setval').on('click', function () {
        //     form.val('example', {
        //         "time": "2020-01-01 08:00:00" // "name": "value"
        //         , "amountofmoney": ""
        //         , "tradename": "统一-冰红茶-1L"
        //         , "subclass" : "云闪付"
        //         , "note": "原价：4.5"
        //     });
        // });


    });
</script>

</body>


</html>